<template>
  <div class="banner">
    <div class="wrapper">
      <div class="celeInfo-left">
        <div class="avatar-shadow" >
          <img class="avatar" :src="films.cover">
        </div>
      </div>
      <div class="celeInfo-right clearfix">
        <div class="movie-brief-container"  >
          <h1 class="name">{{films.filmName}}</h1>
          <div class="ename ellipsis">Harry Potter and the Philosopher's Stone
          </div>
          <div class="bbb">{{films.type}}</div>
          <div class="aaa">美国，英国 /{{films.score}}</div>
          <div class="aaa">
            2020-08-14中国大陆重映
          </div>
        </div>
        <br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br>
        <div class="action-buyBtn">
          <div class="action clearfix">
            <span class="with glyphicon glyphicon-heart-empty"><i class="icon wish-icon"> </i>想看</span>
            <span class="score-btn glyphicon glyphicon-star-empty"> <i class="icon score-btn-icon"> </i>评分</span>
          </div>
          <a class="btn buy" href="">特惠购票</a>
        </div>
        <div class="movie-stats-container">
          <div class="movie-index">
            <p class="movie-index-title">猫眼口碑</p>
            <div class="movie-index-content score normal-score">
              <span class="index-left info-num"><span class="stonefont">{{films.score}}</span></span>
              <div class="index-right">
                <div class="star-wrapper">
                  <div class="star-on" style="width: 93%">
                  </div>
                </div>
                <span class="score-num">44974<span class="stonefont">评分</span></span>
              </div>
            </div>
          </div>
          <div class="movie-index">
            <p class="movie-index-title">累计票房</p>
            <div class="movie-index-content box">
              <span class="stone-font">{{films.filmId}}</span>
              <span class="unit">亿</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="aa" >
      <a style="margin-left: 200px;">猫眼电影</a>>
      <a>电影</a>>
      <span>{{films.filmName}}</span>
    </div>

    <div style="margin-left: 300px;margin-right: 300px">
      <div class="mod-title" clearfix>
        <h2>剧情简介</h2>
      </div>
      <div class="dra">
        <span>{{films.summary}}</span>
      </div>

      <div class="mod-title">
        <h2>演职人员</h2>
        <a class="more" style="margin-right: 300px">全部</a>
      </div>

      <div class="celebrity-container " >
        <ul class="celebrity-list clearfix">
          <li class="celebrity " v-for="item in actor">
            <div><img :src="item.actorImg"></div>
            <div><span style="color:#000000">{{item.actorName}}</span></div>
            <div class="role"><span style="color:#000000">{{item.description}}</span>
            </div>
          </li>
        </ul>
    </div>

    </div>




<!--<movieimg></movieimg>-->

  </div>

</template>

<script>

  // 导入ajax请求库
  import axios from 'axios'
  import movieimg from './movieimg'
  export default {
    name: "MovieDetail",
    data(){
      return{
        films:{},
        actor: [],

      }
    },
    components:{
      movieimg
    },
    mounted() {
/*
* 请求演员信息
* 后端：陈德维
* */
      axios.get('/api/detail/actor')
        .then( (resp) => {
          const ssDetail = resp.data
          console.log(ssDetail);
          this.actor = ssDetail
        });

      /*
      * 请求某部电影的信息
      * 后端：陈德维
      * 数据格式
      * {
  "filmId": 1,
  "filmName": "哈利·波特与魔法石",
  "summary": "哈利波特是一个孤儿，从小寄养在姨妈家，受尽欺凌。但就在哈利11岁生日的时候，他意外收到了霍格沃茨学院的入学通知书。哈利从该学院派来接他的巨人海格口中得知，这是一间魔法学院，并得知了自己的身世，原来哈利的父母都是伟大的魔法师，在对付伏地魔的战斗中双双献身，唯有哈利幸免于难。哈利进入霍格沃茨后，表现出了超乎想象的飞行天赋，得到麦格教授的推荐进入了格兰芬多的魁地奇球队。另一方面，哈利发现霍格沃茨学院内有一股黑暗势力似乎在暗暗滋长，揭开谜团的关键就在有凶恶的三头犬守护的房间内。哈利、罗恩和赫敏三个好朋友决定探个究竟。",
  "type": "奇幻 冒险",
  "hit": "0",
  "upComing": null,
  "time": 1597680000000,
  "score": 9.3,
  "wish": null,
  "cover": "https://p0.meituan.net/moviemachine/4755165ffd65eb737bb5160ea911e0fa343438.jpg@464w_644h_1e_1c"
}*/
      axios.get('/api/film/onFilm') // 电影的
        .then( (resp) => {
          const ssDetail = resp.data
          console.log(ssDetail);
          this.films = ssDetail
        })

    },

  }
</script>

<style scoped>
  .banner {/* 背景 */
    position :absolute;
    width :100%;
    height: 376px;
    background :#392F59;
    color: #fff;


  }
  .aaa{
    margin-top: 12px;
    margin-right:12px;
    margin-left:0px;
  }
  .wrapper{
    width: 1200px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    height: 376px;
    height: 376px;
    position: relative;
  }
  .banner.wrapper{
    width: 1200px;
    margin: 0 auto;
    height: 376px;
    position: relative;
  }
  .celeInfo-left{
    width: 300px;
    float: left;
    position: relative;
    overflow: hidden;
    z-index: 9;
  }
  .avatar-shadow{
    position: relative;
    margin: 0 30px;
    width: 240px;
    height: 330px;
    padding-bottom: 40px;
    background: url() no-repeat bottom;
  }
  .avatar{
    border: 4px solid #fff;
    height: 322px;
    width: 232px;

  }
  .celeInfo-right{
    position: relative;
    margin-right: 30px;
    margin-left: 300px;
    margin-top: 70px;
  }
  .movie-brief-container{
    position: absolute;
    color: #fff;
    font-size: 14px;
    z-index: 1;
  }
  .name{
    width: 900px;
    margin-top: 0;
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 64px;
  }
  .ename{
    width: 340px;
    font-size: 18px;
    line-height: 1.3;
    margin-bottom: 14px;
  }
  .ellipsis{
    margin: 12px 0;
    line-height: 100%;
  }
  .action-buyBtn{
    position: absolute;
    bottom: 20px;
  }
  .with{
    cursor: pointer;
    float: left;
    display: block;
    width: 120px;
    height: 25px;
    background-color: #756189;
    margin-right: 10px;
    padding-top: 11px;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
    border-radius: 2px;
  }
  .score-btn{
    cursor: pointer;
    float: left;
    display: block;
    width: 120px;
    height: 25px;
    background-color: #756189;
    margin-right: 10px;
    padding-top: 11px;
    text-align: center;
    font-size: 14px;
    line-height: 16px;
    color: #fff;
    border-radius: 2px;
  }
  .btn{display: inline-block;
    padding: 2px 15px;
    line-height: 25px;
    font-size: 15px;
    color: #fff;
    background-color: #df2d2d;
  }
  .action-buyBtn .btn.buy {
    margin-top: 10px;
    width: 250px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    border-radius: 2px;
    padding: 0;
  }
  .movie-stats-container{
    position: absolute;
    top: 158px;
    left: 342px;
  }
  .movie-index{
    margin-bottom: 16px;
    color: #fff;
  }
  .movie-index-title{
    font-size: 12px;
    margin-bottom: 8px;
  }
  .movie-index-content{
    overflow: hidden;
  }
  .index-left{
    float: left;
  }
  .info-num{font-size: 30px;
    color: #ffc600;
    height: 30px;
    line-height: 30px;}
  .index-right{
    margin-left: 54px;
    font-size: 12px;
  }
  .star-wrapper{
    width: 60px;
    height: 12px;
    position: relative;
    background-image: url();
    background-repeat: repeat-x;
    margin-bottom: 4px;
  }
  .star-on{
    height: 12px;
    background-image: url();
    background-repeat: repeat-x;
  }
  .stonefont{
    font-family: stonefont;
  }
  .stone-font{
    font-size: 30px;
  }
  .unit{
    font-size: 12px;
    padding-left: 4px;
  }
  .ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .clearfix:after{
    clear: both;
  }
  .clearfix:before {
    content: " ";
    display: table;
  }
  .icon{
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    margin-right: 2px;
    width: 16px;
    height: 16px;
  }
  .wish-icon {
    background: url()
  }
  .score-btn-icon{
    background: url();
  }
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  .dra {
    font-size: 14px;
    line-height: 26px;
  }
  .more {
    float: right;
    cursor: pointer;
    font-size: 14px;
    color: #999;
    padding-right: 14px;
    background: url() no-repeat 100%;
  }
  .clearfix:before {
    content: " ";
    display: table;
  }
  .clearfix:after {
    clear: both;
  }
  .clearfix:after
  .clearfix:before {
    content: " ";
    display: table;
  }
  li{
    text-align: -webkit-match-parent;
    margin-left: 50px;

    font-size: 15px;
    color: #fff;
  }
  .img {
    width: 126px;
    height: 126px;
    margin-left: 6px;
  }
  .album>div {
    float: left;
    width: 126px;
    height: 126px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
  }
  .celebrity-list {
    margin-left: -20px;
  }

  .celebrity {
    float: left;
    width: 128px;
    margin-left: 20px;
    margin-bottom: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .aa{
    margin-bottom: 25px;
    color: #333;

  }
  .mod-title h2:before {

    content: "";
    color: #000;
    display: inline-block;
    width: 4px;
    height: 18px;
    margin-right: 6px;
    background-color: #ef4238;
  }
  h2 {
    display: inline-block;
    margin-bottom: 10px;
    padding: 0;
    font-weight: 400;
    font-size: 18px;
    color: #333;
    line-height: 18px;
  }
  .dra {
    font-size: 14px;
    line-height: 26px;
    color:#000000;
    margin-bottom:14px ;
  }
  .celebrity-container {
    font-size: 16px;
    color: #333;
  }
  celebrity-list {
    margin-left: -20px;
  }
  .celebrity {
    float: left;
    width: 128px;
    margin-left: 20px;
    margin-bottom: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .role {
    display: inline-block;
    width: 128px;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 3px;
    white-space: nowrap;
  }



</style>

